<template>
    <div >
        <!--分页导航栏-->
        <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :total=page.total>
        </el-pagination>

        <br/>

        <div>
            <el-select :style="{width: typeSearchWidth}" @change="chooseSearchType"  v-model="value" placeholder="查找方式">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-input :style="{width: keywordSearchWidth}" placeholder="请输入书籍名称..." @input="searchBook" v-model="keyword" class="input-with-select">
                <el-button @click="searchBook"  slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>

        <el-table  stripe border :data="books">
            <el-table-column  prop="id" label="编号" width="50">
            </el-table-column>

            <el-table-column prop="bookid" label="图书ID" width="100">
            </el-table-column>

            <el-table-column prop="bookname" label="图书名称" width="100">
            </el-table-column>

            <el-table-column prop="author" label="作者" width="100">
            </el-table-column>

            <el-table-column prop="press" label="出版社" width="100">
            </el-table-column>

            <el-table-column prop="translator" label="译者" width="100">
            </el-table-column>

            <el-table-column  show-overflow-tooltip prop="publishdate" label="出版日期" width="100">
            </el-table-column>

            <el-table-column prop="price" label="单价" width="50">
            </el-table-column>

            <el-table-column show-overflow-tooltip prop="content" label="图书简介" width="200">

            </el-table-column>

            <el-table-column prop="" label="操作">
            <template slot-scope="scope">
            <el-button @click="borrow(scope.row)" type="primary" size="mini" icon="el-icon-view">借阅</el-button>
            </template>
            </el-table-column>
        </el-table>

    </div>

</template>


<script>
    import main from "/src/main.js"
    export default {
        name: "ShowAll",
        data() {
            return {
                partialSearch: false,
                keyword: '',
                timer: null,
                len: false,
                books: [],
                page: {
                    total: 0
                },
                queryParams: {
                    currentPageNum: 1
                },
                options: [{
                        value: 'bookname',
                        label: '书名'
                    },
                    {
                        value: 'author',
                        label: '作者名'
                    },
                ],
                value: 'bookname',
                typeSearchWidth: '80px',
                keywordSearchWidth:'200px'
            }
        },
        created() {
        },
        mounted() {
            this.showAll()
        },
        methods: {
            chooseSearchType(){
                this.searchBook()
            },
            initializeTheListData(response, _data){
                _data.books = response.data.data.list
                _data.page.total = response.data.data.total
                for (let i = 0; i < _data.books.length; i++) {
                    if (_data.books[i].content != null) {
                        _data.books[i].content = _data.books[i].content.substring(0, 50) + '...'
                    } else {
                        _data.books[i].content = '暂无'
                    }
                }
            },
            searchBook(){
                this.clearTimer();
                let keyword = this.keyword.trim()
                if(keyword && keyword.length > 0){
                    this.len = true;
                    this.timer = setTimeout(() => {
                        //此处为接口函数
                        let _this = this
                        let _data = this.$data
                        axios.get(main.requestAddress + '/book/searchBookByKeyword',{
                            params: {
                                'pn' : _data.queryParams.currentPageNum,
                                'keyword' : _this.keyword,
                                'searchType': _this.value
                            }
                        }).then(function (response) {
                            //从后端返回给前端的内容(code、message、data...等等)
                            _this.partialSearch = true;
                            _this.initializeTheListData(response, _data);
                        }).catch(function (error) {
                            alert(error)
                        });
                    }, 200)
                }else{
                    if (this.len) {
                        //不查询，就返回所有数据
                        this.showAll();
                    }
                    if (keyword === '') {
                        this.len = false;
                        this.partialSearch =false;
                        return;
                    }
                }
            },
            clearTimer(){
                if(this.timer){
                    clearTimeout(this.timer);
                }
            },
            showAll() {
                const _data = this.$data
                const _this = this
                axios.get(main.requestAddress + '/book/showAllBooks', {
                    params: {'pn': _data.queryParams.currentPageNum}
                }).then(function (response) {
                    _this.initializeTheListData(response, _data);
                }).catch(function (error) {
                    alert(error);
                });
            },
            handleCurrentChange(currentPage) {
                this.queryParams.currentPageNum = currentPage;
                if(this.partialSearch == true){
                    this.searchBook();
                }else{
                    this.showAll();
                }
            },
            borrow(row) {
                //取得该行的id
                let bookid = row.bookid;
                const _this = this;
                axios.get(
                    main.requestAddress + '/book/borrowBookById/' + bookid,
                    {params: {'username': sessionStorage.getItem("username")}}).then(function (response) {
                        let flag = response.data.data;
                        console.log(flag)
                        if(flag === true){
                            _this.$message.success('借阅成功！');
                        }else{
                            _this.$message.error('借阅失败！');
                            _this.$notify.error({
                                title: '错误',
                                message: '每本限借阅一次，每人最多限借五本，请您于@我的借阅处检查是否满足！'
                            });
                        }
                }).catch(function (error) {
                    alert(error);
                });
            }
        }
    }
</script>

<style scoped>
    el-table-column{
        background-color: red;
    }

    .el-select .el-input {
        width: 50px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>